<template>
    <el-dialog :model-value="props.show" title="编辑货品信息" width="620" @close="hides">
        <div class="flex">
            商品货号:
            <div class="mt-4">
                <el-input placeholder="按sku编号搜索" class="input-with-select" v-model="keyword">
                    <template #append>
                        <el-button :icon="Search" @click="searchSku" />
                    </template>
                </el-input>
            </div>
        </div>

        <div class="tablebox">
            <el-table :data="tableData" border style="width: 100%; height: 109px" cell-class-name="align-c"
                header-row-class-name="align-h-r">
                <el-table-column prop="skuCode" label="SKU编号" width="286" />
                <el-table-column prop="price" label="销售价格" />
                <el-table-column prop="stock" label="商品库存" />
                <el-table-column prop="lowStock" label="库存预警值" />
            </el-table>
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="hides">取消</el-button>
                <el-button type="primary" @click="determine"> 确定 </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { Search } from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { ref, watch } from "vue";
import { skuApi, updateSkuAPI } from "./api/index";
// 默认数据
const props = defineProps({
    show: {
        type: Boolean,
        default: false,
    },
    pid: {
        type: Number,
        default: 0,
    },
});
// 表格数据
const tableData = ref<SkuModel[]>([
    {
        id: 0,
        lockStock: 0,
        lowStock: 0,
        pic: "",
        price: 0,
        productId: 0,
        promotionPrice: 0,
        sale: 0,
        skuCode: "",
        spData: "",
        stock: 0
    }
]);
// 输入框的值
const keyword = ref("");
watch(() => props.pid, () => {
    skurequest()
})
const skurequest = () => {
    console.log(props.pid, keyword.value);

    skuApi(props.pid, keyword.value).then((res) => {
        console.log(res);
        // tableData.value = res.data
        Object.assign(tableData.value, res.data)
    })
}

// 点击搜索按钮的方法
const searchSku = () => {
    skurequest()
};

// 接收父组件传过来的方法
const emit = defineEmits(["hide"]);
// 接收父组件传过来的值

// 点击取消或者隐藏
const hides = () => {
    emit('hide', false)
    keyword.value = ""
}

// 点击确定
const determine = () => {
    ElMessageBox.confirm('确定要修改商品属性信息吗', '修改商品属性信息', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: "warning",
    }).then(() => {
        updateSkuAPI(
            props.pid,
            tableData.value
        ).then((res) => {
            ElMessage.success('修改成功')
            emit('hide', true)
        }).catch(() => {
            ElMessage.error('修改失败,请重新修改')

        })
    }).catch(() => {
        ElMessage.success('已经取消修改')

    })

}

</script>

<style scoped lang="less">
.flex {
    display: flex;
    align-items: center;
    margin-bottom: 20px;

    .mt-4 {
        padding-left: 30px;
        width: 280px;
    }
}

:deep(.align-c),
:deep(.align-h-r) {
    .cell {
        text-align: center;
    }
}

:deep(.align-h-r) {
    height: 45px;
}
</style>